<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录记录</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <script src="js/js.cookie.min.js"></script>
    <style>
        html,
        body,
        .container {
            width: 100%;
            height: 100%;
        }
        
        .container {
            position: relative;
            padding: 10px;
            overflow: hidden;
        }
        
        .header {
            height: 40px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container" id="container">
        <Row style="margin: 10px 0">
            <i-col span="2" style="height: 100%;text-align:right;line-height:32px;">用户名称</i-col>
            <i-col span="8" style="padding: 0 10px;">
                <i-input v-model.trim="username"></i-input>
            </i-col>
            <i-col span="8">
                <i-button @click="onHandleClick">查询</i-button>
            </i-col>
        </Row>
        <i-table border :columns="columns" :data="tableData" :height="tableHeight" :loading="loading"></i-table>
    </div>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/util.js"></script>

    <script>
        var timeDifference = DateFormat.getOffset();
        var token = utils.getParameterByName("token");
        new Vue({
            el: "#container",
            data: {
                loading: false,
                username: "",
                tableHeight: 100,
                columns: [{
                    title: "logintimeStr",
                    key: 'logintimeStr',
                    width: 160
                }, {
                    title: "userid",
                    key: 'userid',
                    width: 120
                }, {
                    title: "fromstr",
                    key: 'fromstr',
                    width: 80
                }, {
                    title: "logintype",
                    key: 'logintype',
                    width: 100
                }, {
                    title: "pcbrowser",
                    key: 'pcbrowser'
                }, {
                    title: "phonebrand",
                    key: 'phonebrand'
                }, {
                    title: "phonemodel",
                    key: 'phonemodel'
                }, {
                    title: "phonesdkversion",
                    key: 'phonesdkversion'
                }, {
                    title: "phonesystem",
                    key: 'phonesystem'
                }, {
                    title: "wxversion",
                    key: 'wxversion'
                }, {
                    title: "ip",
                    key: 'ip'
                }],
                tableData: []
            },
            methods: {
                getLoginRecords: function() {

                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.tableHeight = wHeight - 72;
                },
                onHandleClick: function() {
                    var url = myUrls.reportLoginLog(),
                        me = this;
                    me.loading = true;
                    $.ajax({
                        url: url,
                        //contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({
                            userid: this.username
                        }),
                        method: "post",
                        success: function(resp) {
                            if (resp.status == 0 && resp.logs) {
                                resp.logs.forEach(function(item) {
                                    item.logintimeStr = DateFormat.longToLocalDateTimeStr(item.logintime);
                                });
                                me.tableData = resp.logs;
                            } else {
                                me.tableData = [];
                            }
                        },
                        complete: function() {
                            me.loading = false;
                        }
                    })
                }
            },
            mounted: function() {
                var me = this;
                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            },
        })
    </script>

</body>

</html>